<template>
  <router-view />
</template>
<script>
import qs from 'qs'
export default {
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isCollapsed: false,
      Breadcrumb: [],
      isRouterAlive: true
    }
  },
  mounted () {
    var h = window.innerHeight - 313
    var w = window.innerWidth - 282

    this.$store.commit('editheight', h)
    this.$store.commit('editwidth', w)

    // console.log(h)

    var that = this
    window.addEventListener('resize', function () {
      h = window.innerHeight - 313
      w = window.innerWidth - 282
      that.$store.commit('editheight', h)
      that.$store.commit('editwidth', w)
    })
  },
  created () {
    this.axios.interceptors.request.use(
      (config) => {
        // 判断config.data类型是不是对象
        if (Object.prototype.toString.call(config.data) === '[object Object]') {
          if (config.data === undefined || config.data.p === undefined) {
            if (config.data === undefined) {
              config.data = {
                loading: true
              }
            } else if (!config.data.hasOwnProperty('loading')) {
              config.data.loading = true
            }
          }
          if (!this.loading && config.data.loading) {
            this.handleSpinCustom()
          }
          config.data = qs.stringify(config.data)
        }
        // 判断是否存在token，如果存在的话，则每个axios header都加上token
        var token = JSON.parse(this.astgo.getItem(this.Pn + 'info2')).token
        // token = '84aa8f29e2c1d78d3a8f94374a2c3824'
        if (token !== '') config.headers.token = token
        // console.log(JSON.parse( this.astgo.getItem(this.Pn +"info")))
        return config
      },
      (error) => {
        return Promise.reject(error)
      }
    )

    // axios response 拦截器
    this.axios.interceptors.response.use(
      (response) => {
        switch (response.data.code) {
          case 0:
            this.$Message.error(response.data.msg)
            break
          case 100: // 100 清除token信息并跳转到登录页面
            this.clearLocalStorage()
            this.$Message.error(response.data.msg)
            this.$router.push('/login')
            break
          case 101:
            this.clearLocalStorage()
            this.$Message.error(response.data.msg)
            this.$router.push('/login')
            break
          case 102:
            this.clearLocalStorage()
            this.$Message.error(response.data.msg)
            this.$router.push('/login')
            break
        }

        this.$Spin.hide()

        return response.data
      },
      (error) => {
        console.log(error.response)
        if (
          error.response.data.code === 401 ||
          error.response.data.code === 402 ||
          error.response.data.code === 403
        ) {
          this.clearLocalStorage()
          this.$Message.error(error.response.data.msg)
          this.$router.push('/login')
          return false
        }

        return Promise.reject(error)
      }
    )
  },
  methods: {
    clearLocalStorage () {
      this.astgo.removeItem(this.Pn + 'info')
      this.$Spin.hide()
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    handleSpinCustom () {
      // loading
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              class: 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', 'Loading')
          ])
        }
      })
    }
  }
}
</script>

<style lang="scss">
.form_bar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.form_bar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.form_bar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

.success {
  color: #19be6b;
}
.error {
  color: #ed4014;
}
.layout .ivu-dropdown-item {
  display: block;
}
.ivu-select-item {
  width: 100%;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}

.maxH72 {
  max-height: 128px;
  overflow-y: auto;
}

#app {
  overflow: hidden;
}

img {
  display: block;
}

.ivu-box {
  overflow-y: auto;
}

.form_box {
  // max-height: calc( 100vh - 314px );
  overflow-y: auto;
}

// menu滚动条隐藏
.layout_ .ivu-layout-sider-children::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

ul li {
  list-style: none;
  display: inline-block;
}

.li_32 {
  height: 32px;
  line-height: 32px;
  margin-right: 8px;
}

.layout_ .ivu-layout-sider-children {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.no-click {
  pointer-events: none;
  opacity: 0.6;
}

.layout {
  // border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  // border-radius: 4px;
  overflow-y: hidden;
  height: 100%;
}

.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}

.menu-icon {
  transition: all 0.3s;
}

.rotate-icon {
  transform: rotate(-90deg);
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}

.ivu-layout-sider-children {
  overflow-y: scroll;
}

.ivu-form {
  max-width: 100%;
}

.icon_img {
  width: 100px;
  height: 100px;
  margin: 10px auto;
}

.input {
  max-width: 400px;
}

.user_head {
  margin: 10px 0px;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

.user_head img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 80px;
}

.spec_span {
  font-size: 12px;
  color: #aba9a9;
}

.ivu-form {
  margin-top: 24px;
}
.dropdown {
  width: 100px !important;
}
</style>
